<template>
	<view>
		<view class="tabbox">
			<view class="item" :class="item.id == type?'active':''" v-for="item in typeList" @click="changeType(item)"><text>{{item.text}}</text></view>
		</view>
		<view class="box">
			<view class="left">
				<view class="item " :class="item.id == leftId?'active':''" v-for="item in leftList"
					@click="changeLeftId(item)">
					{{item.name}}
				</view>
			</view>
			<view class="right">
				<view class="item" v-for="item in rightList" @click="goDetail(item)">
					<image :src="item.images[0]" mode=""></image>
					<view class="title">
						{{item.name}}
					</view>
					<view class="money">￥ {{item.price}}</view>
					<!-- <view class="oldMoney">原价：22万</view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				leftList: [],
				leftId: '',
				type: "0",
				rightList: [],
				typeList:[{text:"低挡区",id:0},{text:"中档区",id:1},{text:"高档区",id:2},]
			}
		},
		onShow() {
			this.getLeftList()
		},
		methods: {
			getLeftList() {
				this.$get('index/goodstype', {}, (res) => {
					this.leftList = res;
					this.leftId = res[0].id;
					this.getRightList()
					console.log(res)
				})
			},
			changeLeftId(item) {
				this.leftId = item.id;
				this.getRightList()
			},
			getRightList() {
				this.$get('index/goodslist', {
					goods_type_id: this.leftId,
					type: this.type
				}, (res) => {
					this.rightList = res;
					console.log(res)
				})
			},
			changeType(item){
				this.type = item.id;
				this.getRightList()
			},
			goDetail(item){
				uni.navigateTo({
					url: `/pages/detail?id=${item.id}`
				})
			}
		}
	}
</script>

<style>
	.tabbox {
		height: 88rpx;
		line-height: 88rpx;
		display: flex;
	}

	.tabbox .item {
		flex: 1;
		text-align: center;
	}
	
	.tabbox .item text{
		border-bottom: 4rpx solid #fff;
	}

	.tabbox .item.active text {
		color: #13AE4D;
		border-bottom-color: #13AE4D;
		line-height: 88rpx;
		height: 88rpx;
		display: inline-block;
		transition: all 0.3s;
	}

	.box {
		position: absolute;
		top: 88rpx;
		left: 0;
		width: 100%;
		padding-top: 20rpx;
		height: calc(100% - 100rpx);
	}

	.box .left {
		width: 180rpx;
		text-align: center;
		background: #F6F6F6;
		height: 100%;
		float: left;
	}

	.box .left .item {
		height: 96rpx;
		line-height: 96rpx;
		font-size: 28rpx;
		border-bottom: 1px solid #e5e5e5;
		border-left: 4rpx solid #F6F6F6;
		transition:  all .3s;
	}

	.box .left .item.active {
		color: #13AE4D;
		border-left: 4rpx solid #13AE4D;
	}

	.box .right {
		width: calc(100% - 180rpx);
		float: right;
		padding: 18rpx;
		box-sizing: border-box;
		height: 100%;
		overflow-y: auto;
	}

	.box .right .item {
		width: 258rpx;
		height: 380rpx;
		float: left;
		margin-right: 18rpx;
	}

	.box .right .item:nth-child(2n) {
		margin-right: 0;
	}

	.box .right .item image {
		width: 100%;
		height: 258rpx;
		border-radius: 12rpx;
	}

	.box .right .item .title {
		padding: 0 5rpx;
		font-size: 26rpx;
		/* height: 70rpx; */
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		margin-bottom: 10rpx;
	}
	.box .right .item .money{
		color: #13AE4D;
		font-size: 24rpx
	}
	.box .right .item .money text{
		font-size: 36rpx;margin-bottom: 7rpx;
	}
	.box .right .item .oldMoney{
		font-size: 22rpx;
		color: #999999;
		text-decoration: line-through;
	}
</style>
